<template>
  <div class="bottombar">
    <div class="barleft">
       <span class="iconfont icon-zixunzhuanyefuwu"></span><span class="anser">咨询</span>
    </div>
    <div class="barright">
        <span class="buy" @click="fun()">立即订购</span>
    </div>
    <van-sku
  v-model="show"
  :sku="sku"
  :goods="goods"
  :message-config="messageConfig"
  @buy-clicked="onBuyClicked"
  @add-cart="onAddCartClicked"
/>
  </div>
</template>

<script>
import Vue from 'vue';
import { Sku } from 'vant';

Vue.use(Sku);
export default {
    data(){
        return{
              show: false,
               sku: {
                tree: [
                    {
                    // k: '颜色', // skuKeyName：规格类目名称
                    k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                    v: [
                        {
                        id: '1', // skuValueId：规格值 id
                        name: '默认规格', // skuValueName：规格值名称
                        imgUrl: 'https://brup.shengri.cn/goods/2020/01/FpwKoZWdZzhy1yGrn6snIKtFT7e9.jpg-wm', // 规格类目图片，只有第一个规格类目可以定义图片
                        previewImgUrl: 'https://brup.shengri.cn/goods/2020/01/FpwKoZWdZzhy1yGrn6snIKtFT7e9.jpg-wm', // 用于预览显示的规格类目图片
                        }                       
                    ],
                    largeImageMode: true, //  是否展示大图模式
                    }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [
                    {
                    id: 2259, // skuId
                    s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                    s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
                    price: 29800, // 价格（单位分）
                    stock_num: 110 // 当前 sku 组合对应的库存
                    }
                ],
                price: '328.00', // 默认价格（单位元）
                stock_num: 400, // 商品总库存
                collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: false, // 是否无规格商品
                messages: [
                    {
                    // 商品留言
                    datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                    multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                    name: '留言', // 留言名称
                    type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                    required: '1', // 是否必填 '1' 表示必填
                    placeholder: '' // 可选值，占位文本
                    }
                ],
                hide_stock: false // 是否隐藏剩余库存
            },
            goods: {
            // 默认商品 sku 缩略图
                picture: 'https://brup.shengri.cn/goods/2020/01/FpwKoZWdZzhy1yGrn6snIKtFT7e9.jpg-wm'
            },
            messageConfig: {
                // 数据结构见下方文档
                // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
            uploadImg: () => {
                return new Promise((resolve) => {
                setTimeout(() => resolve('https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
                });
            },
            // 最大上传体积 (MB)
            uploadMaxSize: 3,
            // placeholder 配置
            placeholderMap: {
                text: 'xxx',
                tel: 'xxx',
                
            },
            // 初始留言信息
            // 键：留言 name
            // 值：留言内容
            initialMessages: {
                留言: '留言信息'
            }
            },
            skuData: {
                // 商品 id
                goodsId: '946755',
                // 留言信息
                messages: {
                    message_0: '12',
                    message_1: ''
                },
                // 另一种格式的留言，key 不同
                cartMessages: {
                    '留言1': 'xxxx'
                },
                // 选择的商品数量
                selectedNum: 1,
                // 选择的 sku 组合
                selectedSkuComb: {
                    id: 2257,
                    price: 100,
                    s1: '30349',
                    s2: '1193',
                    s3: '0',
                    stock_num: 111,
                    properties: [
                    {
                        k_id: 123,
                        k: '加料',
                        is_multiple: true,
                        v: [
                        {
                            id: 1223,
                            name: '椰果',
                            price: 1
                        }
                        ]
                    }
                    ],
                    property_price: 1
                },
            },  
    }
               
        
    },
methods:{
      fun(){
            this.show = true;
        },
    
  
       onBuyClicked(){
          if(localStorage.getItem("token")=="" || localStorage.getItem("token")==null){
              let goLogin = window.confirm("亲，您还没有登录哦，请先登录");
            if (goLogin) {
                this.$router.push("DAccountLogin");
            }
        }else{
           this.$router.push("/Shopingcar");
          
            }
            },
        onAddCartClicked(){
          if(localStorage.getItem("token")=="" || localStorage.getItem("token")==null){
             let goLogin = window.confirm("亲，您还没有登录哦，请先登录");
            if (goLogin) {
                this.$router.push("DAccountLogin");
            }
        }else{    
           this.$router.push("/Shopingcar");
        }      
       }
       }
}
</script>

<style scoped>
@import '../../../public/flower/iconfont.css';
.bottombar{
    width: 100%;
    height: 0.48rem;
    background-color: #fefffe;
    display: flex;
    position: fixed;
    bottom: 0;
    border-top: 0.02rem solid #dfdfdf;
}
.barleft,.barright{
    width: 50%;
    height: 0.48rem;
    line-height: 0.48rem;
}
.barright{
  width: 75%;
}
.iconfont{
    color: #4b9fa5;
    font-size: 0.24rem;
    margin-left: 0.18rem;
    margin-right: 0.12rem;
}
.anser{
    color: #111111;
    font-size: 0.18rem;
}
.buy{
    width: 100%;
    display: block;
    float: left;    
    text-align: center;
    font-size: 0.18rem;
    color: #fff;
     background-color: #e15141;
}
</style>